<template>
    <div class="bd">
        <!-- 图片 -->
        <div class="left-img" @mouseover="isShowPlay = true" @mouseleave="isShowPlay = false" @click="rankClick">
            <transition name="el-fade-in-linear">
                <div class="mask-playicon"  v-show="isShowPlay">
                    <span class="iconfont icon-play"></span>
                </div>
            </transition>
            <div class="time">{{item.updateTime | showDate}} 更新</div>
            <img :src="item.coverImgUrl" alt=""/>
        </div>
        <!-- 列表 -->
        <div class="right-songlist">
            <div v-if="songs.length != 0">
                 <el-table :data="songs" stripe style="width: 100%" :show-header="false" height="200px" size="small"  @row-dblclick="playMusic">
                    <el-table-column label="序号" width="20">
                        <template slot-scope="{$index}">
                            <span :class="{hot:$index < 3}">{{$index | formatIndex}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="歌曲" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ar[0].name" label="歌曲" :show-overflow-tooltip="true"></el-table-column>
                </el-table>
                <div class="more by" @click="rankClick">查看全部<span class="iconfont icon-xiayiye"></span></div>
            </div>
            <div v-else>
				<el-skeleton :rows="6" animated />
		    </div>
        </div> 
    </div>
</template>
<script>
import { formatDate } from '@/common/formatDate';
export default {
    name:'',
    props: {
		item: {
			type: Object,
			default() {
				return []
			},
		},
	},
    data() {
        return {
            isShowPlay:false,
            songs:[]
        }
    }, 
    created(){
        this.getSongListDetailBy();
    },
    methods:{
        // 获取歌单中部分信息
        async getSongListDetailBy(){
            let resSongs =  await this.$API.songlistdetail.getSongListDetail(this.item.id);
            if(resSongs.code == 200){
                this.songs = resSongs.playlist.tracks.slice(0, 5);
            }
        },
        // 跳转到歌单详情页
        rankClick(){
            this.$router.push('/songlistdetail/' + this.item.id)
        },
        // 双击播放音乐
        async playMusic(song){
            // 获取歌曲是否可以播放
            let isCheck = await this.$API.playmusic.checkMusic(song.id);
            if(isCheck.success){
                // 获取歌曲播放的url
                let songUrl =  await this.$API.playmusic.getSongUrl(song.id);
                if(songUrl.code == 200){
                    // 保存当前播放歌曲的url
                    this.$store.dispatch('saveSongUrl',songUrl.data[0].url)
                }
                // 获取歌曲的信息 
                // 获取这首歌的详细信息
                let songDetail = await  this.$API.songlistdetail.getEverySongDetail(song.id);
                if(songDetail.code == 200){
                    // 将当前播放歌曲的信息保存在仓库
                    this.$store.dispatch('saveSongDetail',songDetail.songs[0])
                    // 添加到播放列表
                    this.$store.dispatch('addPlayinglist',songDetail.songs[0])
                }
            }
            
        }
    },
   
    filters: {
		formatIndex(index) {
			return index + 1;
		},
		showDate(value) {
			const date = new Date(value);
			return formatDate(date, "yyyy-MM-dd");
		},
	},
}
</script>
<style lang="less" scoped>
    .bd {
	display: flex;
	height: 230px;
	.left-img {
		position: relative;
		width: 200px;
		height: 200px;
		cursor: pointer;
		img {
			height: 100%;
		}
		.time {
			position: absolute;
			top: 130px;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 12px;
		}
	}
	.right-songlist {
		width: 84%;
		padding-left: 20px;
		height: 230px;
		.more {
			cursor: pointer;
			font-size: 12px;
			.icon-xiayiye {
				font-size: 12px;
			}
		}
	}
}
.hot {
	color: var(--themeColor);
}
</style>